<template>
  <div 
    class="content-container" 
    @touchstart.stop="touchStart" 
    @touchmove.stop="touchMove" 
    @touchend.stop="touchEnd"
    @mousedown.stop="mouseStart"
    @mousemove.stop="mouseMove"
    @mouseup.stop="mouseEnd"
    @mouseleave.stop="mouseEnd"
  >
    <!-- 下拉刷新区域 -->
    <div class="refresh-container" :class="{ 'active': pullDistance > 40 }">
      <div class="refresh-content">
        <div class="refresh-icon" :class="{ 'refreshing': isRefreshing }">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
          </svg>
        </div>
        <div class="refresh-text">{{ refreshText }}</div>
      </div>
    </div>
    
    <div 
      class="content-wrapper" 
      :style="{ 
        transform: `translateX(calc(${-currentIndex * 100}% + ${slideOffset}px))`,
        transition: isSliding ? 'none' : 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
        marginTop: `${Math.min(pullDistance, 120)}px`
      }"
    >
      <div class="content-page" ref="contentPages">
        <slot name="tab-0"></slot>
      </div>
      <div class="content-page">
        <slot name="tab-1"></slot>
      </div>
      <div class="content-page">
        <slot name="tab-2"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { useSwipe } from '@/composables/useSwipe';
import { watch, ref, computed } from 'vue';

export default {
  name: 'MainContent',
  props: {
    currentIndex: {
      type: Number,
      required: true
    }
  },
  setup(props, { emit }) {
    // 下拉刷新相关状态
    const pullDistance = ref(0);
    const isRefreshing = ref(false);
    const contentPages = ref(null);
    const startY = ref(0);
    const currentScrollTop = ref(0);
    const refreshText = ref('下拉可以刷新');
    
    // 监听下拉距离变化，更新提示文本
    watch(pullDistance, (newValue) => {
      if (!isRefreshing.value) {
        if (newValue > 80) {
          refreshText.value = '松开立即刷新';
        } else if (newValue > 0) {
          refreshText.value = '下拉可以刷新';
        }
      }
    });
    
    // 监听刷新状态变化，更新提示文本
    watch(isRefreshing, (newValue) => {
      if (newValue) {
        refreshText.value = '正在刷新...';
      }
    });
    
    // 使用滑动composable，传入itemCount表示有3个标签页
    const { 
      slideOffset, 
      isSliding, 
      touchStart: _touchStart, 
      touchMove: _touchMove, 
      touchEnd: _touchEnd,
      mouseStart: _mouseStart,
      mouseMove: _mouseMove,
      mouseEnd: _mouseEnd
    } = useSwipe(
      {
        get value() { return props.currentIndex },
        set value(val) { emit('update:currentIndex', val) }
      }, 
      3
    );
    
    // 包装事件处理函数，确保阻止事件冒泡
    const touchStart = (e) => {
      e.stopPropagation();
      _touchStart(e);
      
      // 记录下拉起始位置
      const touch = e.touches[0];
      startY.value = touch.clientY;
      
      // 获取当前滚动位置
      const currentPage = document.querySelector(`.content-page:nth-child(${props.currentIndex + 1})`);
      if (currentPage) {
        currentScrollTop.value = currentPage.scrollTop;
      }
    };
    
    const touchMove = (e) => {
      if (isSliding.value) {
        e.stopPropagation();
        e.preventDefault();
      }
      _touchMove(e);
      
      // 处理下拉刷新逻辑
      const touch = e.touches[0];
      const currentY = touch.clientY;
      const diff = currentY - startY.value;
      
      // 只有当前页面滚动到顶部且下拉时才触发刷新
      const currentPage = document.querySelector(`.content-page:nth-child(${props.currentIndex + 1})`);
      if (currentPage && currentPage.scrollTop === 0 && diff > 0 && !isRefreshing.value) {
        // 计算下拉距离，添加阻尼效果
        pullDistance.value = Math.pow(diff, 0.85);
        
        // 阻止默认滚动行为
        e.preventDefault();
        e.stopPropagation();
      }
    };
    
    const touchEnd = (e) => {
      e.stopPropagation();
      _touchEnd(e);
      
      // 处理下拉刷新结束逻辑
      if (pullDistance.value > 80 && !isRefreshing.value) {
        // 触发刷新
        isRefreshing.value = true;
        
        // 发出刷新事件
        emit('refresh');
        
        // 保持一定的下拉距离以显示刷新动画
        pullDistance.value = 80;
        
        // 直接刷新页面，不等待其他操作
        window.location.reload();
      } else {
        // 回弹
        pullDistance.value = 0;
      }
    };
    
    const mouseStart = (e) => {
      e.stopPropagation();
      _mouseStart(e);
    };
    
    const mouseMove = (e) => {
      if (isSliding.value) {
        e.stopPropagation();
        e.preventDefault();
      }
      _mouseMove(e);
    };
    
    const mouseEnd = (e) => {
      e.stopPropagation();
      _mouseEnd(e);
    };
    
    // 监听滑动状态变化并发射事件
    watch([isSliding, slideOffset], () => {
      emit('sliding-state-change', {
        isSliding: isSliding.value,
        slideOffset: slideOffset.value
      });
    });

    return {
      slideOffset,
      isSliding,
      touchStart,
      touchMove,
      touchEnd,
      mouseStart,
      mouseMove,
      mouseEnd,
      pullDistance,
      isRefreshing,
      contentPages,
      startY,
      currentScrollTop,
      refreshText
    };
  }
}
</script>

<style scoped lang="less">
.content-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  z-index: 1;
  height: calc(100vh - 100px); /* 减去头部和底部导航高度 */
  margin-top: 5px; /* 添加一点顶部间距，让刷新区域更明显 */
  
  .refresh-container {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 36, 66, 0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(-100%);
    
    &.active {
      transform: translateY(0);
      height: 120px;
      background-color: rgba(255, 36, 66, 0.15);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .refresh-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      
      .refresh-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
        color: #ff2442;
        filter: drop-shadow(0 2px 4px rgba(255, 36, 66, 0.3));
        
        svg {
          width: 100%;
          height: 100%;
        }
        
        &.refreshing {
          animation: rotate 1.5s infinite cubic-bezier(0.23, 1, 0.32, 1);
        }
      }
      
      .refresh-text {
        color: #ff2442;
        font-size: 30px;
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .content-wrapper {
    display: flex;
    height: 100%;
    transition: margin-top 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, margin-top;
    
    .content-page {
      flex: 0 0 100%;
      width: 100%;
      overflow-y: auto;
      background-color: #f5f5f5;
      -webkit-overflow-scrolling: touch; /* 优化iOS滚动 */
      overscroll-behavior: contain; /* 防止滚动穿透 */
    }
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 